<template>
  <div class="item-info base-info">
    <div class="sub-btn">
      <div class="add-btn">
        <div class="add-btn" v-if="this.handletype=='2'">
          <el-button @click="newhouse">清空</el-button>
          <el-button @click="dosave" v-if="isedit">新建</el-button>
          <el-button @click="dosave2" v-else>保存</el-button>
        </div>
      </div>
    </div>
    <!-- <div class="top_info">
      <div class="base_header">
        <h3>房屋信息</h3>
      </div>
    </div>-->
    <div class="left-info">
      <div class="item" v-if="this.dotype!='1'">
        <span>
          <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>房屋编号
        </span>
        <input
          type="text"
          v-model="houseData.detailnum"
          :class="{xiugai: houseData1.detailnum}"
          readonly
        >
        <b class="code" @click="newfwcode" v-if="(dotype=='1'||dotype=='2')&&ishowfwbh">生成房屋编号</b>
      </div>

      <div class="item spec clearfix">
        <span>
          <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>房屋实测面积
          <br>(平方米)
        </span>
        <div class="text">
          <input type="text" value="有证" readonly>
          <input type="text" v-model="fwarea1" oninput="value=value.match(/^\d*(\.?\d{0,2})/g)" :readonly="dotype=='4'||dotype=='3'">
        </div>
        <div class="text">
          <input type="text" value="无证" readonly>
          <input type="text" v-model="fwarea2" oninput="value=value.match(/^\d*(\.?\d{0,2})/g)" :readonly="dotype=='4'||dotype=='3'">
        </div>
      </div>
      <div class="item">
        <span>
          <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>占地面积(平方米)
        </span>
        <input type="text" v-model="houseData.zdmj" disabled>
        <!-- <b class="errorMes">{{ errors.first('占地面积') }}</b> -->
      </div>
      <!-- <div class="item">
        <span>
          <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>房屋类型
        </span>
        <select
          v-model="houseData.dtype"
          :class="{xiugai:houseData1.dtype}"
          :disabled="dotype=='4'||dotype=='3'"
        >
          <option value="undefined" selected style="display:none;">请选择</option>
          <option
            :value="item.hash.code_id"
            v-for="item in htypeArr"
            :key="item.id"
          >{{item.hash.code_name}}</option>
        </select>
      </div> -->
      <div class="item">
        <span>
          <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>房屋结构
        </span>
        <select
          v-model="houseData.dstruct"
          :class="{xiugai:houseData1.dstruct}"
          :disabled="dotype=='4'||dotype=='3'"
        >
          <option value="undefined" selected style="display:none;">请选择</option>
          <option
            :value="item.hash.code_id"
            v-for="item in horgArr"
            :key="item.id"
          >{{item.hash.code_name}}</option>
        </select>
      </div>
      <div class="item">
        <span>
          <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>房屋状态
        </span>
        <select
          v-model="houseData.dstatus"
          :class="{xiugai:houseData1.dstatus}"
          :disabled="dotype=='4'||dotype=='3'"
        >
          <option value="undefined" selected style="display:none;">请选择</option>
          <option
            :value="item.hash.code_id"
            v-for="item in hstatusArr"
            :key="item.id"
          >{{item.hash.code_name}}</option>
        </select>
      </div>
      <div class="item">
        <span>
          <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>楼层数量
        </span>
        <input
          type="text"
          :disabled="dotype=='4'||dotype=='3'"
          v-model="houseData.floornum"
          :class="{xiugai:houseData1.floornum}"
          oninput = "value=value.replace(/[^\d]/g,'')"
          :placeholder="(handletype=='4'||handletype=='3')?'':'请输入'"
          v-validate="'required|decimal'"
          name="楼层数量"
        >
        <b class="errorMes">{{ errors.first('楼层数量') }}</b>
      </div>

      <div class="item icon">
        <span>建筑年限</span>
        <!-- <vue-datepicker-local

          format="YYYY-MM"
          valueFormat="YYYY-MM"
          style="width:300px;border-color:#ccc;border-top: 2px solid #999;"
          clearable
        ></vue-datepicker-local>-->
        <el-date-picker
          type="month"
          :disabled="handletype=='4'||handletype=='3'"
          v-model="houseData.buildtime"
          :placeholder="(handletype=='4'||handletype=='3')?'':'请选择'"
          valueFormat="yyyy-MM"
          style="width:300px;border-color:#ccc"
        ></el-date-picker>
      </div>
      <div class="item" style="margin-top:10px">
        <span>建筑年数</span>
        <input type="text" v-model="buildyears" :class="{xiugai:houseData1.buildyears}" disabled>
      </div>
      <div class="item">
        <span>
          <i v-if="this.dotype=='1'||this.dotype=='2'">*</i>权属性质
        </span>
        <select
          v-model="houseData.owntype"
          :class="{xiugai:houseData1.owntype}"
          :disabled="handletype=='4'||handletype=='3'"
          :placeholder="(handletype=='4'||handletype=='3')?'':'请选择'"
        >
          <option value="undefined" selected style="display:none;">请选择</option>
          <option
            :value="item.hash.code_id"
            v-for="item in owntypeArr"
            :key="item.id"
          >{{item.hash.code_name}}</option>
        </select>
      </div>
    </div>
    <div class="right-info">
      <div class="upload">
        <div class="avatar" style="padding-top:20px">
          <ul>
            <li>
              <test
                tn="img1"
                localfiletype="02"
                :imagefile="this.houseData"
                :isupload="dotype"
              >房屋图片1</test>
            </li>
            <li>
              <test
                tn="img2"
                localfiletype="02"
                :imagefile="this.houseData"
                :isupload="dotype"
              >房屋图片2</test>
            </li>
            <li>
              <test
                tn="img3"
                localfiletype="02"
                :imagefile="this.houseData"
                :isupload="dotype"
              >房屋图片3</test>
            </li>
          </ul>
        </div>
        <div class="desc" style="margin-bottom: 28px;">
          <span>上传的文件为房屋内（外）部图，最多上传3个。文件格式支持是jpg、png、pdf。</span>
        </div>
      </div>
      <div class="item textarea">
        <span style="width:100px">房屋备注</span>
        <textarea type="text" v-model="houseData.remark"></textarea>
      </div>
    </div>

    <div class="info-list">
      <div class="title">房屋信息明细表</div>
      <table width="100%" class="table">
        <thead>
          <tr>
            <th>序号</th>
            <th>房屋编号</th>
            <th>房屋有证实测面积(平方米)</th>
            <th>房屋无证实测面积(平方米)</th>
            <th>占地面积(平方米)</th>
            <th>房屋状态</th>
            <th>审核状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="houseList.length==0">
            <td colspan="10">暂无数据</td>
          </tr>
          <tr
            v-else
            v-for="(item,index) in houseList"
            :key="item.id"
            :class="{xiugai:item.hash.checkstatus=='1'}"
          >
            <td>{{index+1}}</td>
            <td>{{item.hash.detailnum}}</td>
            <td>{{item.hash.area1}}</td>
            <td>{{item.hash.area2}}</td>
            <td>{{item.hash.zdmj}}</td>
            <td>{{item.hash.dstatusname}}</td>
            <td>
              <span v-if="item.hash.checkstatus==1">待审核</span>
              <span v-else-if="item.hash.checkstatus==2">审核通过</span>
              <span v-else-if="item.hash.checkstatus==3" style="color:#f60">审核不通过</span>
              <span v-else style="color:rgb(114, 218, 104)">已归档</span>
            </td>
            <td>
              <span style="color:blue;margin-right:6px" @click="checkhouse(item)">查看</span>
              <span
                style="color:blue;margin-right:6px"
                @click="eidthouse(item)"
                v-if="(item.hash.checkstatus!=='10')&&handletype=='2'"
              >编辑</span>
              <!-- <span
                style="color:blue;margin-right:6px"
                v-if="(item.hash.checkstatus=='0'||item.hash.checkstatus=='3')&&handletype=='2'"
                @click="deletehouse(item)"
              >删除</span> -->
              <span
                style="color:blue"
                v-if="item.hash.checkstatus=='2'&&handletype=='2'&&ishowgd"
                @click="dogd(item.hash.detailid)"
              >归档</span>
              <!-- <span
                style="color:blue"
                v-if="(item.hash.checkstatus=='0'||item.hash.checkstatus=='3')&&handletype=='2'"
                @click="removeRent(item.hash.rentid,item.hash.status)"
              >删除</span>
              <div v-else>
                <span style="color:blue" @click="checkhouse(item)">查看</span>&nbsp;&nbsp;
                <span
                  v-if="handletype=='2'&&item.hash.status=='1'"
                  @click="unactiveRent(item.hash.rentid)"
                  style="color:blue"
                >归档</span>
              </div>-->
            </td>
          </tr>
          <tr>
            <td colspan="2">总计</td>
            <td>{{yzarea}}</td>
            <td>{{wzarea}}</td>
            <td>{{ztarea}}</td>
            <td colspan="3"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import test from '~/components/common/upload/test.vue';
import VueDatepickerLocal from 'vue-datepicker-local';

export default {
  data() {
    return {
      ishowgd: false,
      oldhouseData: { area1: '0', area2: '0' },
      isedit: true,
      ishowfwbh: true,
      houseData3: [],
      houseList: [],
      ts: this.newStore(),
      houseData: {
        zdmj: '0',
        areabuild1: '0',
        detailnum: '',
        area1: '0',
        area2: '0',
      },
      fwarea1: '0',
      fwarea2: '0',
      fwdetailid: '',
      yzarea: 0,
      wzarea: 0,
      ztarea: 0,
      houseData1: { area1: '0', area2: '0' },
      dialogImageUrl: '',
      dialogVisible: false,
      detailid: '',
      htypeArr: [],
      horgArr: [],
      hstatusArr: [],
      usetypeArr: [],
      isupload: '',
      owntypeArr: [],

      danwei1Arr: [],
      danwei2Arr: [],
      dotype: '',
    };
  },
  props: {
    handletype: {
      type: String,
      twoWay: true,
    },
    // 点击节点回调
    func: {
      type: Function,
      default: null,
    },
  },
  computed: {
    buildyears() {
      const nowDate = new Date();
      const nowDateyear = nowDate.getFullYear();
      const buildDate = new Date(this.houseData.buildtime);
      const a = buildDate.getFullYear();
      let years;
      if (a && a !== 1970) {
        years = nowDateyear - a;
      } else {
        years = 0;
      }
      return years;
    },
    zongti() {
      let zongti1;
      if (this.houseData.acturearea1 && this.houseData.areabuild1) {
        zongti1 = this.houseData.acturearea1 - this.houseData.areabuild1;
      } else {
        return 0;
      }
      return zongti1;
    },
  },
  watch: {
    fwarea1(val, oldval) {
      console.log(val, oldval);
      this.houseData.area1 = val;
      if (this.handletype == '2') {
        this.getfwarea();
      }
    },
    fwarea2(val, oldval) {
      console.log(val, oldval);
      this.houseData.area2 = val;
      if (this.handletype == '2') {
        this.getfwarea();
      }
    },
  },
  created() {
    console.log(this.dotype);
    this.checkgd();
    this.getSelectList('01', 'htypeArr');
    this.getSelectList('02', 'horgArr');
    this.getSelectList('03', 'hstatusArr');
    this.getSelectList('04', 'usetypeArr');

    this.getSelectList('06', 'owntypeArr');

    this.getSelectList('10', 'danwei1Arr');
    this.gethouseList();
  },
  mounted() {
    this.dotype = this.handletype;
  },
  components: {
    test,
    VueDatepickerLocal,
  },
  methods: {
    checkgd() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BF829FBCD1B3C6C87ABE555654F5B8C21',
        token: localStorage.getItem('token'),
        funcid: '204131',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.data.operation1[0].hash.cou == '0') {
          this.ishowgd = false;
        } else {
          this.ishowgd = true;
        }
      });
    },
    newhouse() {
      this.ishowfwbh = true;
      this.isedit = true;
      this.houseData = {
        detailnum: '',

      };
      this.fwarea1 = '0';
      this.fwarea2 = '0';
    },
    deletehouse(item) {
      const res = {
        handle:
          '76ABA4BE996F68CEB3F2193D08E313323AAD2C5DFB36FC56815119495881416B',
        token: localStorage.getItem('token'),
        detailid: item.hash.detailid,
        hid: this.$route.query.hid,
      };
      this.$confirm('确认删除此条房屋信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.spost(this.ts, '/mainservlet', res).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
            this.gethouseList();
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
    },
    checkhouse(item) {
      this.isedit = true;
      this.ishowfwbh = false;
      this.fwdetailid = '';
      this.fwarea1 = '0';
      this.fwarea2 = '0';
      this.fwdetailid = item.hash.detailid;
      const req = {
        handle:
          '76ABA4BE996F68CE15C917E318C173B295D9105102CBDF9F021A445010569AEF',
        token: localStorage.getItem('token'),
        detailid: item.hash.detailid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.houseData = ts.d.data.operation1[0].hash;
        this.fwarea1 = this.houseData.area1;
        this.fwarea2 = this.houseData.area2;
        this.houseData.zdmj = item.hash.zdmj;
        if (ts.d.data.operation2.length > 0) {
          this.houseData1 = ts.d.data.operation2[0].hash;
          for (const key in this.houseData) {
            if (this.houseData[key] == this.houseData1[key]) {
              this.houseData1[key] = false;
            } else {
              this.houseData1[key] = true;
            }
          }
        } else {
          this.houseData1 = {};
        }
      });
    },
    gethouseList() {
      let req;
      if (this.handletype == '3') {
        req = {
          handle:
            '76ABA4BE996F68CED6E79E6CF72B4AD04920EC37433E0E2F91BE9BB85CED52D6',
          hid: this.$route.query.hid,
          token: localStorage.getItem('token'),
          xh: this.$route.query.xh,
        };
      } else if (this.handletype == '4') {
        req = {
          handle:
            '76ABA4BE996F68CE15C917E318C173B269F098E9778AE023CB7683D9B20500C7',
          hid: this.$route.query.hid,
          token: localStorage.getItem('token'),
          xh: this.$route.query.xh,
        };
      } else {
        req = {
          handle: '76ABA4BE996F68CE15C917E318C173B275852EAA595983BF',
          hid: this.$route.query.hid,
          token: localStorage.getItem('token'),
          xh: this.$route.query.xh,
        };
      }
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (this.handletype == '3') {
          this.houseList = ts.d.data.operation6;
        } else {
          this.houseList = ts.d.data.operation5;
        }
        this.yzarea = 0;
        this.wzarea = 0;
        this.ztarea = 0;
        for (let i = 0; i < this.houseList.length; i += 1) {
          this.yzarea += Number(this.houseList[i].hash.area1);
          this.wzarea += Number(this.houseList[i].hash.area2);
          this.ztarea += Number(this.houseList[i].hash.zdmj);
        }
        this.yzarea=this.yzarea.toFixed(2)
         this.wzarea=this.wzarea.toFixed(2)
          this.ztarea=this.ztarea.toFixed(2)
      });
    },
    eidthouse(item) {
      console.log(item);
      this.isedit = false;
      this.ishowfwbh = false;
      this.detailid = item.hash.detailid;
      this.fwdetailid = item.hash.detailid;
      this.fwarea1 = item.hash.area1;
      this.fwarea2 = item.hash.area2;
      const req = {
        handle:
          '76ABA4BE996F68CE15C917E318C173B295D9105102CBDF9F021A445010569AEF',
        token: localStorage.getItem('token'),
        detailid: item.hash.detailid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.houseData = ts.d.data.operation1[0].hash;
        this.houseData.zdmj = item.hash.zdmj;
        this.oldhouseData.area1 = ts.d.data.operation1[0].hash.area1;
        this.oldhouseData.area2 = ts.d.data.operation1[0].hash.area2;
      });
    },
    dosave() {
      if (this.houseData.detailnum == '') {
        this.$message('房屋编号不能为空');
        return;
      }
      const req = {
        handle: '76ABA4BE996F68CE417AAAFED0C1AC071668D80F0C6D2E96',
        token: localStorage.getItem('token'),
        fwbh: this.houseData.detailnum,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.data.operation1[0].hash.cou == '0') {
          if (!this.houseData.area1) {
            this.$message('房屋实测有证面积不能为空');
          } else if (!this.houseData.area2) {
            this.$message('房屋实测无证面积不能为空');
          } else if (!this.houseData.zdmj) {
            this.$message('占地面积不能为空');
          } else if (!this.houseData.dstruct) {
            this.$message('房产结构不能为空');
          } else if (!this.houseData.floornum) {
            this.$message('楼层数量不能为空');
          } else if (!this.houseData.dstatus) {
            this.$message('房产状态不能为空');
          } else if (!this.houseData.owntype) {
            this.$message('权属性质不能为空');
          } else {
            this.$confirm('确认新增？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              const res = {
                handle: '76ABA4BE996F68CE5F203644521BEE2AB5C3D31C4572658C',
                token: localStorage.getItem('token'),
                hid: this.$route.query.hid,
                detailnum: this.houseData.detailnum,
                zdmj: this.houseData.zdmj,
                area1: this.houseData.area1,
                area2: this.houseData.area2,
                dtype: '', // this.houseData.dtype
                dstruct: this.houseData.dstruct,
                floornum: this.houseData.floornum,
                dstatus: this.houseData.dstatus,
                owntype: this.houseData.owntype,
                buildtime: this.houseData.buildtime,
                remark: this.houseData.remark,
                buildyears: this.buildyears,
                img1: this.houseData.img1,
                img2: this.houseData.img2,
                img3: this.houseData.img3,
              };
              this.spost(this.ts, '/mainservlet', res).then((ts) => {
                this.$message({
                  type: 'success',
                  message: '新增成功!',
                });
                this.houseData = {
                  detailnum: '',
                };
                this.gethouseList();
                this.newhouse();
              });
            });
          }
        } else {
          this.$message({
            type: 'error',
            message: '资产编号已存在，请重新生成后再提交！',
          });
        }
      });
    },
    dogd(id) {
      const req = {
        handle:
          '76ABA4BE996F68CE417AAAFED0C1AC07B15A670541844335388CE3474DC9ECC6947C61655EDF54FA',
        token: localStorage.getItem('token'),
        detailid: id,
        hid: this.$route.query.hid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.data.operation1[0].hash.check1 == '1') {
          this.unactiveRent(id);
        } else {
          this.$message({
            type: 'error',
            message: '该房屋已有用途，请先归档用途信息!',
          });
        }
      });
    },
    unactiveRent(id) {
      const res = {
        handle:
          '76ABA4BE996F68CE369E74C0A84D16DA449523052528A3A6815119495881416B',
        token: localStorage.getItem('token'),
        detailid: id,
      };
      this.$confirm('归档后该数据不参与统计，确认归档？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.spost(this.ts, '/mainservlet', res).then((ts) => {
            this.$message({
              type: 'success',
              message: '归档成功!',
            });
            this.gethouseList();
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
    },
    dosave2() {
      if (this.houseData.area1 == '') {
        this.$message('房屋实测有证面积不能为空');
        return;
      } if (this.houseData.area2 == '') {
        this.$message('房屋实测无证面积不能为空');
        return;
      } if (this.houseData.zdmj == '') {
        this.$message('房屋占地面积不能为空');
        return;
      } if (this.houseData.dstruct == '') {
        this.$message('房产结构不能为空');
        return;
      } if (this.houseData.floornum == '') {
        this.$message('楼层数量不能为空');
        return;
      } if (this.houseData.dstatus == '') {
        this.$message('房产状态不能为空');
        return;
      } if (this.houseData.owntype == '') {
        this.$message('权属性质不能为空');
        return;
      }
      if (this.oldhouseData.area1 != this.houseData.area1 || this.oldhouseData.area2 != this.houseData.area2) {
        this.$confirm('确认保存？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const res2 = {
            handle:
              '76ABA4BE996F68CEDFC8492E914AB35BE6EB3A2175BD5C15815119495881416B',
            token: localStorage.getItem('token'),
            hid: this.$route.query.hid,
            detailid: this.detailid,
            detailnum: this.houseData.detailnum,
            area1: this.houseData.area1,
            zdmj: this.houseData.zdmj,
            area2: this.houseData.area2,
            dtype: '', // this.houseData.dtype
            dstruct: this.houseData.dstruct,
            floornum: this.houseData.floornum,
            dstatus: this.houseData.dstatus,
            owntype: this.houseData.owntype,
            buildtime: this.houseData.buildtime,
            buildyears: this.buildyears,
            img1: this.houseData.img1,
            img2: this.houseData.img2,
            img3: this.houseData.img3,
          };
          this.spost(this.ts, '/mainservlet', res2).then(() => {
            this.$confirm('房屋面积发生改变，是否改变此房屋的闲置用途？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              const res = {
                handle:
              '76ABA4BE996F68CE417AAAFED0C1AC07997E2DAA225A8733CA0FF58B2D728C1C',
                token: localStorage.getItem('token'),
                oldarea1: this.oldhouseData.area1,
                oldarea2: this.oldhouseData.area2,
                detailid: this.detailid,
              };
              this.spost(this.ts, '/mainservlet', res).then((ts) => {
                if (ts.d.data.operation1[0].hash.msg == 'ok') {
                  this.$message({
                    type: 'success',
                    message: '用途同步成功!',
                  });
                  this.gethouseList();
                  this.newhouse();
                } else {
                  this.$message({
                    type: 'error',
                    message: ts.d.data.operation1[0].hash.msg,
                  });
                  this.gethouseList();
                  this.newhouse();
                }
              });
            }).catch(() => {
              this.$message({
                type: 'success',
                message: '房屋保存成功!',
              });
              this.gethouseList();
              this.newhouse();
            });
          });
        });
      } else {
        this.$confirm('确认保存？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const res = {
            handle:
              '76ABA4BE996F68CEDFC8492E914AB35BE6EB3A2175BD5C15815119495881416B',
            token: localStorage.getItem('token'),
            hid: this.$route.query.hid,
            detailid: this.detailid,
            detailnum: this.houseData.detailnum,
            area1: this.houseData.area1,
            area2: this.houseData.area2,
            zdmj: this.houseData.zdmj,
            dtype: '', // this.houseData.dtype
            dstruct: this.houseData.dstruct,
            floornum: this.houseData.floornum,
            dstatus: this.houseData.dstatus,
            owntype: this.houseData.owntype,
            buildtime: this.houseData.buildtime,
            buildyears: this.buildyears,
            img1: this.houseData.img1,
            img2: this.houseData.img2,
            img3: this.houseData.img3,
          };
          this.spost(this.ts, '/mainservlet', res).then(() => {
            this.$message({
              type: 'success',
              message: '保存成功!',
            });
            this.gethouseList();
            this.newhouse();
          });
        });
      }
    },
    newfwcode() {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DDE44356D47BF6D989',
        token: localStorage.getItem('token'),
        hid: this.$route.query.hid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        // console.log(ts.d.data.operation1);
        if (ts.d.data.operation1[0].hash.fwbh == '') {
          this.$message({
            type: 'error',
            message: '房屋编号生成失败!',
          });
        } else {
          this.houseData.detailnum = ts.d.data.operation1[0].hash.fwbh;
          console.log(this.houseData);

          this.$message({
            type: 'success',
            message: '房屋编号生成成功!',
          });
        }
      });
    },
    checkiscert(value) {
      if (value == '否') {
        this.houseData.certnum = '无';
        this.houseData.areabuild1 = '0';
      } else {
        this.houseData.certnum = '';
        this.houseData.areabuild1 = '';
      }
    },
    getSelectList(codetype, td, supid) {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD1C1E493C3971E71F',
        token: localStorage.getItem('token'),
        supid,
        codetype,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        // console.log(ts.d.data.operation1);
        this[td] = ts.d.data.operation1;
      });
    },
    getfwarea() {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD3EA2C4FCB8393255B0E3BF434334EBC9',
        token: localStorage.getItem('token'),
        area: Number(this.fwarea1) + Number(this.fwarea2),
        hid: this.$route.query.hid,
        detailid: this.fwdetailid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.houseData.zdmj = ts.d.data.operation1[0].hash.zdmj;
      });
    },
    getTestinput(imgPath, tn) {
      this[tn] = imgPath;
    },
  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.code {
  padding: 7px 3px;
  height: 33px;
  line-height: 33px;
  position: relative;
  background: #69f;
  border-radius: 3px;
  text-decoration: none;
  color: #fff;
}

.errorMes {
  width: 160px;
  color: red;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}

.weixiugai {
  background: #69f;
}

.item {
  i {
    color: red;
  }
}

.base_header {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  font-size: 18px;
  color: #69f;
}

.xiugai {
  background: #ffff0070;
}

.avatar ul li {
  float: left;
  width: 33%;
}

.info-wrapper .info-content .upload-btn[data-v-6b40dfc5] {
  background: #fff;
  width: 90px;
}

.item-info>>>.el-date-editor .el-range-separator {
  padding: 0;
  line-height: 22px;
}

.item-info >>>.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 300px;
  height: 30px;
}

.item-info >>>.el-input__inner {
  height: 30px;
  border-top: 2px solid #999;
  border-radius: 0;
}

.item-info >>>.el-input__icon {
  line-height: 22px;
  color: #333;
}

.avatar >>>.el-upload--picture-card {
  width: 90px;
  height: 90px;
  line-height: 100px;
  margin-top: 20px;
}

.avatar >>>.el-upload-list--picture-card .el-upload-list__item {
  width: 90px;
  height: 90px;
  margin-top: 20px;
}

.upload-btn >>>.el-upload-list__item {
  width: 160%;
}

.sub-btn >>> .el-button--success {
  background: #69f;
  border-color: #69f;
}

.sub-btn >>> .el-button {
  padding: 8px 20px;
}

.info-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;

  .info-w {
    height: 50px;
    line-height: 50px;
    width: 100%;
    background: #69f;
    color: #fff;
    cursor: pointer;

    .info-c {
      width: 1200px;
      margin: 0 auto;

      .close {
        display: inline-block;
        margin-right: 20px;

        .iconfont {
          font-size: 20px;
        }
      }

      .title {
        display: inline-block;
        font-size: 18px;
      }
    }
  }

  .info-content {
    width: 1200px;
    min-height: 600px;
    margin: 0 auto 50px;

    .upload-btn {
      display: inline-block;
      vertical-align: top;
      margin-left: 5px;
      width: 80px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 5px;
      color: #fff;
    }

    .info-tab {
      cursor: pointer;
      border-bottom: 1px solid #ccc;

      .tab-item {
        display: inline-block;
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #ccc;
        margin: 15px 0 15px -1px;
        background: #fff;

        &.active {
          background: #69f;
          color: #fff;
        }
      }
    }

    .item-info {
      position: relative;
      margin-bottom: 50px;

      .sub-btn {
        position: absolute;
        right: 190px;
        top: -60px;
        height: 40px;
        line-height: 40px;

        .save-btn, .add-btn {
          display: inline-block;
          margin-right: 15px;
        }
      }

      .info-list {
        margin-top: 50px;
        border-top: 1px solid #ccc;
        text-align: center;

        .title {
          padding: 30px 0;
          font-weight: 600;
          font-size: 18px;
          color: #6699ff;
        }

        table {
          text-align: center;
          padding-left: 30px;
          cursor: pointer;
          border-collapse: collapse;

          td, th {
            border: 1px solid #ccc;
            font-size: 14px;
            color: #666;
            height: 40px;
          }

          thead {
            th {
              font-weight: 600;
              background-color: #F2F2F2;

              &:nth-of-type(1) {
                width: 40px;
              }

              &:nth-of-type(2) {
                width: 120px;
              }
            }
          }
        }
      }

      .left-info, .right-info {
        display: inline-block;
        vertical-align: top;
        width: 600px;

        .item {
          margin-top: 5px;
          height: 30px;
          line-height: 30px;

          &:nth-of-type(1) {
            margin-top: 15px;
          }

          &.icon {
            position: relative;

            .iconfont {
              position: absolute;
              top: 0;
              right: 190px;
            }
          }

          span {
            display: inline-block;
            vertical-align: top;
            width: 140px;
            color: #333333;
            font-weight: 600;
          }

          input {
            display: inline-block;
            vertical-align: top;
            width: 300px;
            height: 30px;
            border: 1px solid #ccc;
            border-top: 2px solid #999;
          }

          select {
            display: inline-block;
            width: 300px;
            height: 30px;
            border: 1px solid #ccc;
            border-top: 2px solid #999;
            text-align: right;

            &.min1 {
              width: 100px;
            }

            &.min2 {
              width: 200px;
              margin-left: -1px;
            }
          }

          &.textarea {
            height: 150px;

            textarea {
              width: 300px;
              height: 150px;
              border: 1px solid #ccc;
              border-top: 2px solid #999;
            }
          }

          &.spec {
            height: 70px;

            span {
              float: left;
            }

            .text {
              display: inline-block;

              input:nth-of-type(1) {
                width: 100px;
              }

              input:nth-of-type(2) {
                width: 200px;
              }

              &:nth-of-type(2) {
                margin-top: 5px;
              }
            }
          }

          &.spec2 {
            height: 30px;

            .text {
              display: inline-block;

              input {
                display: inline-block;
                vertical-align: top;
              }

              input:nth-of-type(1) {
                width: 200px;
              }

              input:nth-of-type(2) {
                width: 100px;
              }

              select {
                display: inline-block;
                vertical-align: top;
                width: 100px;
              }
            }
          }

          &.spec3 {
            height: 70px;

            span {
              height: 70px;
              float: left;
            }

            .text {
              display: inline-block;
              margin-top: 5px;

              input:nth-of-type(1) {
                width: 200px;
              }

              input:nth-of-type(2) {
                width: 100px;
              }
            }
          }

          &.spec4 {
            height: 70px;

            span {
              float: left;
              height: 70px;
            }

            input {
              margin-top: 5px;
            }
          }

          &.spec5 {
            .line {
              display: inline-block;
              vertical-align: middle;
              width: 20px;
              height: 1px;
              background: #ccc;
            }

            .iconfont {
              &:ntn-of-type(1) {
                right: 190px;
              }

              &:nth-of-type(2) {
                right: 350px;
              }
            }
          }
        }

        .upload {
          width: 400px;
          margin-top: 15px;
          text-align: center;

          .avatar {
            width: 400px;
            height: 175px;
            border: 1px solid #ccc;
            margin-bottom: 15px;
          }

          .desc {
            margin-bottom: 15px;
          }

          .btn {
            display: inline-block;
            margin-bottom: 15px;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            background: #69f;
            color: #fff;
          }
        }
      }

      &.base-info {
        .right-info {
          .item {
            margin-top: 6px;
          }
        }
      }

      &.rent-info {
        .right-info {
          .item {
            margin-top: 11px;

            &:nth-of-type(1) {
              margin-top: 15px;
            }
          }
        }
      }

      span {
        display: inline-block;
        vertical-align: top;
      }
    }
  }
}
</style>
